<template>
  <div class="page-search">
    <Form
      v-model="formdata"
      @update:modelValue="handlemodelValue"
      v-bind="contentSearchConfig"
    >
      <template #header>
        <h1 class="header">高级检索</h1>
      </template>
      <template #footer>
        <div class="handle-btns">
          <el-button :icon="RefreshLeft" @click="restart">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchNode">
            搜索
          </el-button>
        </div>
      </template>
    </Form>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { Search, RefreshLeft } from "@element-plus/icons-vue";
import Form from "@/base-ui/form/src/form.vue";
export default {
  components: {
    Form,
  },
  props: {
    contentSearchConfig: {
      type: Object,
      reqired: true,
    },
  },
  emits: ["queryBtnClick"],
  setup(props, { emit }) {
    const formItems = props.contentSearchConfig?.formItems ?? [];
    const formOriginData = {};
    for (const item of formItems) {
      formOriginData[item.field] = "";
    }
    const formdata = ref(formOriginData);
    const searchNode = () => {
      emit("queryBtnClick", formdata.value);
    };
    const restart = () => {
      for (const key in formOriginData) {
        formdata.value[`${key}`] = formOriginData[`${key}`];
      }
    };
    const handlemodelValue = () => {};
    return {
      formdata,
      handlemodelValue,
      Search,
      RefreshLeft,
      restart,
      searchNode,
    };
  },
};
</script>

<style lang="scss" scope>
.handle-btns {
  padding-right: 0 !important;
  border-bottom: 1px solid #ccc;
}
</style>
